<template>
  <div class="app-container">
    <el-row class="topNum" :gutter="0">
      <el-col :span="8" class="topText topBorder">
        <h4>总订单数</h4>
        <p style="color:#2727FF">{{this.orderNumber.countOrder}}个</p>
      </el-col>
      <el-col :span="8" class="topText topBorder">
        <h4>进行中</h4>
        <p style="color:#7BAF2A">{{this.orderNumber.haveOrder}}个</p>
      </el-col>
      <el-col :span="8" class="topText">
        <h4>已完成</h4>
        <p style="color:#E1273E">{{this.orderNumber.completedOrder}}个</p>
      </el-col>
    </el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="订单号" prop="orderInfoCode">
        <el-input v-model="queryParams.orderInfoCode" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>

      <el-form-item label="充电桩名称" prop="deviceName">
        <el-input v-model="queryParams.deviceName" placeholder="请输入充电桩名称" clearable @keyup.enter.native="handleQuery"/>
      </el-form-item>

      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable>
          <el-option v-for="dict in dict.type.order_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="订单状态" prop="orderInfoStatus">
        <el-select v-model="queryParams.orderInfoStatus" placeholder="请选择订单状态" clearable>
          <el-option
            v-for="dict in dict.type.order_info_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>-->
      <!--      <el-form-item label="场站编号" prop="chargeStationCode">
        <el-input
          v-model="queryParams.chargeStationCode"
          placeholder="请输入场站编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备编号" prop="deviceCode">
        <el-input
          v-model="queryParams.deviceCode"
          placeholder="请输入设备编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户编号" prop="customCode">
        <el-input
          v-model="queryParams.customCode"
          placeholder="请输入客户编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker clearable
          v-model="queryParams.startTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker clearable
          v-model="queryParams.endTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="累计用电量" prop="totalPower">
        <el-input
          v-model="queryParams.totalPower"
          placeholder="请输入累计用电量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="支付金额" prop="paymentAmount">
        <el-input
          v-model="queryParams.paymentAmount"
          placeholder="请输入支付金额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="退款金额" prop="refundAmount">
        <el-input
          v-model="queryParams.refundAmount"
          placeholder="请输入退款金额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="支付方式" prop="paymentMethod">
        <el-select v-model="queryParams.paymentMethod" placeholder="请选择支付方式" clearable>
          <el-option
            v-for="dict in dict.type.payment_method"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="总电费" prop="totalElecMoney">
        <el-input
          v-model="queryParams.totalElecMoney"
          placeholder="请输入总电费"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="总服务费" prop="totalSeviceMoney">
        <el-input
          v-model="queryParams.totalSeviceMoney"
          placeholder="请输入总服务费"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="总金额" prop="totalMoney">
        <el-input
          v-model="queryParams.totalMoney"
          placeholder="请输入总金额"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="结束方式" prop="stopReason">
        <el-select v-model="queryParams.stopReason" placeholder="请选择结束方式" clearable>
          <el-option
            v-for="dict in dict.type.stop_reason"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['custom:orderInfo:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                   v-hasPermi="['custom:orderInfo:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                   v-hasPermi="['custom:orderInfo:export']">导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="resetQuery"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="orderInfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <!--<el-table-column label="订单ID" align="center" prop="orderInfoId" />-->
      <el-table-column label="订单号" align="center" prop="orderInfoCode"/>
      <!-- <el-table-column label="订单支付状态" align="center" prop="orderInfoStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_info_status" :value="scope.row.orderInfoStatus"/>
        </template>
      </el-table-column>
     <el-table-column label="场站编号" align="center" prop="chargeStationCode" />
      <el-table-column label="设备编号" align="center" prop="deviceCode" />
      <el-table-column label="客户名称" align="center" prop="customName" />-->
      <el-table-column label="客户手机号" align="center" prop="customPhone"/>
      <el-table-column label="场站名称" align="center" prop="chargeStationName"/>
      <el-table-column label="充电桩编号" align="center" prop="deviceCode"/>
      <el-table-column label="充电桩名称" align="center" prop="deviceName" />
      <el-table-column label="充电枪编号" align="center" prop="portId"/>
      <el-table-column label="充电枪名称" align="center" prop="portName" />
      <!--      <el-table-column label="充电枪名称" align="center" prop="gunPos">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.gun_pos_type" :value="scope.row.gunPos" />
        </template>
      </el-table-column>-->
      <el-table-column label="充电时长（min）" align="center" prop="totalTime">
        <template slot-scope="scope">
          <span>{{scope.row.totalTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="充电电量（kwh）" align="center" prop="totalPower"/>
      <el-table-column label="充电金额（元）" align="center" prop="chargeMoney"/>
      <el-table-column label="开始时间" align="center" prop="startTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <!--<el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="订单状态" align="center" prop="orderStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus"/>
        </template>
      </el-table-column>
      <!--      <el-table-column label="累计用电量" align="center" prop="totalPower" />
      <el-table-column label="支付金额" align="center" prop="paymentAmount" />
      <el-table-column label="退款金额" align="center" prop="refundAmount" />
      <el-table-column label="支付方式" align="center" prop="paymentMethod">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_method" :value="scope.row.paymentMethod"/>
        </template>
      </el-table-column>-->
      <!-- <el-table-column label="总电费" align="center" prop="totalElecMoney" />
      <el-table-column label="总服务费" align="center" prop="totalSeviceMoney" />
-->
      <!--<el-table-column label="结束方式" align="center" prop="stopReason">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.stop_reason" :value="scope.row.stopReason"/>
        </template>
      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="authority">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDetails(scope.row)"
                     v-hasPermi="['custom:orderInfo:details']">详情
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['custom:orderInfo:edit']">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['custom:orderInfo:remove']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 添加或修改用户订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="订单号" prop="orderInfoCode">
          <el-input v-model="form.orderInfoCode" placeholder="请输入订单号"/>
        </el-form-item>
        <el-form-item label="订单支付状态" prop="orderInfoStatus">
          <el-select v-model="form.orderInfoStatus" placeholder="请选择订单支付状态" style="width: 100%">
            <el-option v-for="dict in dict.type.order_info_status" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态" prop="orderStatus">
          <el-select v-model="form.orderStatus" placeholder="请选择订单状态" style="width: 100%">
            <el-option v-for="dict in dict.type.order_status" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营商编号" prop="operatorCode">
          <el-select v-model="form.operatorCode" placeholder="请选择运营商信息" style="width: 100%">
            <el-option v-for="dict in userList" :key="dict.operatorCode" :label="dict.operatorName"
                       :value="dict.operatorCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场站编号" prop="chargeStationCode">
          <el-select v-model="form.chargeStationCode" placeholder="请选择运营商信息" style="width: 100%">
            <el-option v-for="dict in stationList" :key="dict.chargeStationCode" :label="dict.chargeStationName"
                       :value="dict.chargeStationCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备" prop="deviceCode">
          <el-select v-model="form.deviceCode" filterable style="width: 100%" placeholder="请选择设备">
            <el-option v-for="item in iotDeviceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="设备编号" prop="deviceCode">
          <el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
        </el-form-item>-->
        <!--<el-form-item label="客户编号" prop="customCode">
          <el-input v-model="form.customCode" placeholder="请输入客户编号" />
        </el-form-item>-->
        <el-form-item label="客户编号" prop="customCode">
          <el-select v-model="form.customCode" placeholder="请选择运营商信息" style="width: 100%">
            <el-option v-for="dict in CustomUserList" :key="dict.customCode" :label="dict.customName"
                       :value="dict.customCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker clearable v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime" style="width: 100%">
          <el-date-picker clearable v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="退款时间" prop="refundTime" style="width: 100%">
          <el-date-picker clearable v-model="form.refundTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择退款时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="累计用电量" prop="totalPower">
          <el-input v-model="form.totalPower" placeholder="请输入累计用电量"/>
        </el-form-item>
        <el-form-item label="支付金额" prop="paymentAmount">
          <el-input v-model="form.paymentAmount" placeholder="请输入支付金额"/>
        </el-form-item>
        <el-form-item label="退款金额" prop="refundAmount">
          <el-input v-model="form.refundAmount" placeholder="请输入退款金额"/>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-select v-model="form.paymentMethod" placeholder="请选择支付方式" style="width: 100%">
            <el-option v-for="dict in dict.type.payment_method" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总电费" prop="totalElecMoney">
          <el-input v-model="form.totalElecMoney" placeholder="请输入总电费"/>
        </el-form-item>
        <el-form-item label="总服务费" prop="totalSeviceMoney">
          <el-input v-model="form.totalSeviceMoney" placeholder="请输入总服务费"/>
        </el-form-item>
        <el-form-item label="总金额" prop="totalMoney">
          <el-input v-model="form.totalMoney" placeholder="请输入总金额"/>
        </el-form-item>
        <el-form-item label="结束方式" prop="stopReason">
          <el-select v-model="form.stopReason" placeholder="请选择结束方式" style="width: 100%">
            <el-option v-for="dict in dict.type.stop_reason" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog :title="detailsTitle" :visible.sync="details" width="800px" append-to-body>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="订单信息" name="first">
          <!-- 基本信息 -->
          <p style="font-size: 16px;color: black;font-weight: bold;">基本信息</p>
          <el-descriptions :column="columnNum">
            <el-descriptions-item label="订单编号">{{form.orderInfoCode}}</el-descriptions-item>
            <el-descriptions-item label="客户名称">{{form.customName}}</el-descriptions-item>
            <el-descriptions-item label="客户手机号">{{form.customPhone}}</el-descriptions-item>
            <el-descriptions-item label="场站名称">{{form.chargeStationName}}</el-descriptions-item>
            <el-descriptions-item label="充电桩编号">{{form.deviceCode}}</el-descriptions-item>
            <el-descriptions-item label="充电桩名称">{{form.deviceName}}</el-descriptions-item>
            <el-descriptions-item label="充电枪编号">{{form.portId}}</el-descriptions-item>
            <el-descriptions-item label="充电枪名称">{{form.portName}}</el-descriptions-item>
            <el-descriptions-item label="开始时间">{{form.startTime}}</el-descriptions-item>
            <el-descriptions-item label="结束时间">{{form.endTime}}</el-descriptions-item>
            <el-descriptions-item label="开始SOC(%)">{{form.startSoc}}</el-descriptions-item>
            <el-descriptions-item label="结束SOC(%)">{{form.endSoc}}</el-descriptions-item>
            <el-descriptions-item label="充电时长(min)">{{form.totalTime}}</el-descriptions-item>
            <el-descriptions-item label="充电电量(kw)">{{form.totalPower}}</el-descriptions-item>
            <el-descriptions-item label="结算账户名(商户号)">{{form.mchId}}</el-descriptions-item>
            <el-descriptions-item label="支付金额(元)">{{form.totalMoney}}</el-descriptions-item>
            <el-descriptions-item label="支付方式">
              <dict-tag :options="dict.type.payment_method" :value="form.paymentMethod"/>
            </el-descriptions-item>
            <el-descriptions-item label="支付时间">{{ form.payTime }}</el-descriptions-item>
            <el-descriptions-item label="计费策略">{{ form.priceTypeName }}</el-descriptions-item>
            <el-descriptions-item label="花费金额(元)">{{form.chargeMoney}}</el-descriptions-item>
            <el-descriptions-item label="电费(元)">{{form.totalSeviceMoney}}</el-descriptions-item>
            <el-descriptions-item label="服务费(元)">{{form.totalSeviceMoney}}</el-descriptions-item>
            <el-descriptions-item label="退款金额(元)" v-if="form.refundAmount > 0">{{form.refundAmount}}
            </el-descriptions-item>
            <el-descriptions-item label="退款时间" v-if="form.refundAmount > 0">{{ form.refundTime }}</el-descriptions-item>
            <el-descriptions-item label="退款方式" v-if="form.refundAmount > 0">原路退回</el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <dict-tag :options="dict.type.order_status" :value="form.orderStatus"/>
            </el-descriptions-item>
          </el-descriptions>
          <p style="font-size: 16px;color: black;font-weight: bold">操作步骤</p>
          <el-steps :active="active" simple>
            <el-step v-for="(iteam,index) in processList" :title="iteam.orderInfoProcessName"
                     :icon="iteam.icon"></el-step>
          </el-steps>
        </el-tab-pane>
        <el-tab-pane label="计费详情" name="second">
          <!-- 计费详情 -->
          <div>
            <p style="font-size: 16px;color: black;font-weight: bold">计费详情</p>
<!--            <el-table :data="detailsList" border style="width: 100%">-->
<!--              <el-table-column prop="timeSlot" label="时间" align="center">-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="electricChargeUnivalent" label="电费单价（元/度）" align="center">-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="serviceChargeUnivalent" label="服务费单价（元/度）" align="center">-->
<!--              </el-table-column>-->
<!--            </el-table>-->
            <el-table :data="tableDataA" stripe style="width: 100%">
              <el-table-column align="center" prop="interval" label="时间">
              </el-table-column>
              <el-table-column align="center" prop="period" label="时段">
                <template v-slot="{row}">
                  <el-tag type="success" :style="{'background-color':row.col,'color':'#fff'}">{{ row.period }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="electricityPrice" label="电费(元)">
              </el-table-column>
              <el-table-column align="center" prop="serviceCharge" label="服务费(元)">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <!--        <el-tab-pane label="操作步骤" name="third">-->
        <!--finish-status="success"-->
        <!--          <el-steps :active="active"  align-center simple>-->
        <!--            <el-step title="步骤 1"></el-step>-->
        <!--            <el-step v-for="(iteam,index) in processList" :title="iteam.orderInfoProcessName"></el-step>-->
        <!--          </el-steps>-->
        <!-- 操作步骤 -->
        <!--<div>
          <p style="font-size: 16px;color: black;">操作步骤</p>
          <el-table :data="processList" border style="width: 100%">
            <el-table-column prop="orderInfoProcessName" label="名称" align="center">
            </el-table-column>
            <el-table-column prop="orderInfoProcessResult" label="状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.orderInfoProcessResult == '1'">完成</span>
                <span v-else>未完成</span>
              </template>
            </el-table-column>
            <el-table-column prop="customName" label="用户" align="center">
              <template slot-scope="scope">
            <span
              v-if="scope.row.customName != null && scope.row.customName != undefined">{{scope.row.customName}}</span>
                <span v-else>&#45;&#45;</span>
              </template>
            </el-table-column>
            <el-table-column prop="orderInfoProcessCreateTime" label="时间" align="center">
              <template slot-scope="scope">
            <span
              v-if="scope.row.orderInfoProcessCreateTime != null && scope.row.orderInfoProcessCreateTime != undefined ">{{scope.row.orderInfoProcessCreateTime}}</span>
                <span v-else>&#45;&#45;</span>
              </template>
            </el-table-column>
          </el-table>
        </div>-->
        <!--</el-tab-pane>-->
        <el-tab-pane label="过程分析" name="fourth">
          <div style="width: 1000px;">
            <!--            <p style="font-size: 16px;color: black;">过程分析</p>-->
            <div id="mainV" style="margin-left:20px;width: 700px;height:400px;"></div>
            <br/>
            <br/>
            <div id="mainI" style="margin-left:20px;width: 700px;height:400px;"></div>
            <br/>
            <br/>
            <div id="mainPower" style="margin-left:20px;width: 700px;height:400px;"></div>
            <br/>
            <br/>
            <div id="mainSOC" style="margin-left:20px;width: 700px;height:400px;"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listOrderInfo,
    getOrderInfo,
    delOrderInfo,
    addOrderInfo,
    updateOrderInfo,
    getInfoCount,
    orderInfoDetailsList
  } from '@/api/smart/custom/orderInfo'
  import { listDetails } from '@/api/smart/custom/details'
  import { listProcess } from '@/api/smart/custom/process'
  import { listStation } from '@/api/smart/operator/station'
  import { listUser } from '@/api/smart/operator/user'
  import { getIotDeviceList } from '@/api/smart/subsidiary/subsidiary'
  import { listCustomUser } from '@/api/smart/custom/user'
  import { getInfoByStationApi} from '@/api/smart/operator/adjustPrice.js'

  export default {
    name: 'OrderInfo',
    dicts: ['stop_reason', 'payment_method', 'order_info_status', 'order_status', 'gun_pos_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        codes: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 运营商用户表格数据
        userList: [],
        // 场站表格数据
        stationList: [],
        // 客户表格数据
        CustomUserList: [],
        //设备列表
        iotDeviceList: [],
        // 用户订单表格数据
        orderInfoList: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 详情是否显示弹出层
        details: false,
        // 详情弹出层标题
        detailsTitle: '',
        // 查询参数
        processParams: {
          pageNum: 1,
          pageSize: 24,
          orderInfoCode: null
        },
        // 订单流程表格数据
        processList: [],
        //计费详情
        detailsList: [],
        tableDataA: [],
        // 表单统计参数
        orderNumber: {},
        authority: null,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderInfoCode: null,
          orderInfoStatus: null,
          orderStatus: null,
          operatorCode: null,
          chargeStationCode: null,
          deviceCode: null,
          deviceName: null,
          customCode: null,
          startTime: null,
          endTime: null,
          refundTime: null,
          totalPower: null,
          paymentAmount: null,
          refundAmount: null,
          paymentMethod: null,
          totalElecMoney: null,
          totalSeviceMoney: null,
          totalMoney: null,
          stopReason: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          orderInfoId: [{ required: true, message: '订单ID不能为空', trigger: 'blur' }],
          orderInfoCode: [{ required: true, message: '订单号不能为空', trigger: 'blur' }],
          orderStatus: [{ required: true, message: '订单状态不能为空', trigger: 'change' }],
          orderInfoStatus: [{ required: true, message: '订单支付状态不能为空', trigger: 'change' }],
          operatorCode: [{ required: true, message: '订单状态不能为空', trigger: 'change' }],
          chargeStationCode: [{ required: true, message: '场站编号不能为空', trigger: 'blur' }],
          deviceCode: [{ required: true, message: '设备编号不能为空', trigger: 'blur' }],
          customCode: [{ required: true, message: '客户编号不能为空', trigger: 'blur' }],
          startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
          endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
          totalPower: [{ required: true, message: '累计用电量不能为空', trigger: 'blur' }],
          paymentAmount: [{ required: true, message: '支付金额不能为空', trigger: 'blur' }],
          refundAmount: [{ required: true, message: '退款金额不能为空', trigger: 'blur' }],
          paymentMethod: [{ required: true, message: '支付方式不能为空', trigger: 'change' }],
          totalElecMoney: [{ required: true, message: '总电费不能为空', trigger: 'blur' }],
          totalSeviceMoney: [{ required: true, message: '总服务费不能为空', trigger: 'blur' }],
          totalMoney: [{ required: true, message: '总金额不能为空', trigger: 'blur' }]
        },
        columnNum: 2,
        timeList: [],
        outVList: [],
        needVList: [],
        outIList: [],
        needIList: [],
        powerList: [],
        socList: [],
        activeName: 'first',//tags
        active: 0//步骤条
      }
    },
    created() {
      this.getList()
      this.getStation()
      this.selectUser()
      this.getIotDevice()
      this.getCustomUserList()
      this.getInfoNumber()
      this.authority = this.$auth.hasPermi('custom:orderInfo:edit')
    },
    methods: {
      handleClick(e) {
        //tags点击事件
      },
      loadEcharts() {
        this.loadVEcharts()
        this.loadIEcharts()
        this.loadPowerEcharts()
        this.loadSOCEcharts()
      },
      loadVEcharts() {
        let myChart = this.$echarts.init(document.getElementById('mainV'))
        let option = {
          title: {
            text: '电压',
            titleStyle: {
              color: '#000000',
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          color: ['#91cc75', '#fac858'],
          legend: {
            left: 'right'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '输出电压',
              type: 'line',
              smooth: true,
              data: this.outVList
            },
            {
              name: '需求电压',
              type: 'line',
              smooth: true,
              data: this.needVList
            }
          ]
        }

        myChart.setOption(option)
      },
      loadIEcharts() {
        let myChart = this.$echarts.init(document.getElementById('mainI'))
        let option = {
          title: {
            text: '电流',
            titleStyle: {
              color: '#000000',
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          color: ['#91cc75', '#fac858'],
          legend: {
            left: 'right'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '输出电流',
              type: 'line',
              smooth: true,
              data: this.outIList
            },
            {
              name: '需求电流',
              type: 'line',
              smooth: true,
              data: this.needIList
            }
          ]
        }

        myChart.setOption(option)
      },
      loadPowerEcharts() {
        let myChart = this.$echarts.init(document.getElementById('mainPower'))
        let option = {
          title: {
            text: '充电过程',
            titleStyle: {
              color: '#000000',
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          color: ['#91cc75', '#fac858'],
          legend: {
            data: ['电量'],
            left: 'right'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '电量',
              type: 'line',
              smooth: true,
              data: this.powerList
            }
          ]
        }

        myChart.setOption(option)
      },
      loadSOCEcharts() {
        let myChart = this.$echarts.init(document.getElementById('mainSOC'))
        let option = {
          title: {
            text: 'SOC',
            titleStyle: {
              color: '#000000',
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          color: ['#91cc75', '#fac858'],
          legend: {
            data: ['进度'],
            left: 'right'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.timeList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '进度',
              type: 'line',
              smooth: true,
              data: this.socList
            }
          ]
        }

        myChart.setOption(option)
      },
      /** 查询用户订单列表 */
      getList() {
        this.loading = true
        listOrderInfo(this.queryParams).then(response => {
          this.orderInfoList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      /*查询运营商列表*/
      selectUser() {
        listUser(this.queryParams).then(response => {
          this.userList = response.rows
        })
      },
      /*查询场站列表*/
      getStation() {
        listStation(this.queryParams).then(response => {
          this.stationList = response.rows
        })
      },
      /*查询设备列表*/
      getIotDevice() {
        getIotDeviceList().then(response => {
          this.iotDeviceList = response.data
        })
      },
      /*查询用户列表*/
      getCustomUserList() {
        listCustomUser().then(response => {
          this.CustomUserList = response.rows
        })
      },
      /*查询订单流程*/
      getListProcess() {
        listProcess(this.processParams).then(response => {
          this.processList = response.rows
          if (this.processList.length > 0) {
            this.processList[0].icon = 'el-icon-document-add'
            this.processList[1].icon = 'el-icon-video-play'
            this.processList[2].icon = 'el-icon-video-pause'
            this.processList[3].icon = 'el-icon-document-checked'
            this.processList.forEach((item,index)=>{
              if(item.orderInfoProcessResult == '1'){
                this.active = index + 1
              }
            })
          }
        })
      },
      /*查询计费详情*/
      getListDetails(priceTypeId) {
        // listDetails(this.processParams).then(response => {
        //   this.detailsList = response.rows
        // })
        if(priceTypeId != null && priceTypeId != undefined && priceTypeId != ''){
          let params = {
            priceTypeId: priceTypeId
          }
          getInfoByStationApi(params).then(res => {
            this.tableDataA = res.data.tableDataList || []
          })
        }
      },
      /*计算计费详情*/
      getOrderInfoDetailsList() {
        orderInfoDetailsList(this.form).then(response => {
          this.detailsList = response.rows
        })
      },
      /*查询订单统计*/
      getInfoNumber() {
        getInfoCount().then(response => {
          this.orderNumber = response.data
          console.log(response.data)
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          orderInfoId: null,
          orderInfoCode: null,
          orderInfoStatus: null,
          orderStatus: null,
          operatorCode: null,
          chargeStationCode: null,
          deviceCode: null,
          customCode: null,
          startTime: null,
          endTime: null,
          refundTime: null,
          totalPower: null,
          paymentAmount: null,
          refundAmount: null,
          paymentMethod: null,
          totalElecMoney: null,
          totalSeviceMoney: null,
          totalMoney: null,
          stopReason: null,
          startSoc: null,
          endSoc: null,
          mchId: null,
          chargeMoney: null,
          totalTime: null
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.orderInfoId)
        this.codes = selection.map(item => item.orderInfoCode)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.getStation()
        this.selectUser()
        this.getIotDevice()
        this.getCustomUserList()
        this.open = true
        this.title = '添加用户订单'
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        this.getStation()
        this.selectUser()
        this.getIotDevice()
        this.getCustomUserList()
        const orderInfoId = row.orderInfoId || this.ids
        getOrderInfo(orderInfoId).then(response => {
          this.form = response.data
          this.open = true
          this.title = '修改用户订单'
        })
      },
      /** 详细按钮操作 */
      handleDetails(row) {
        this.reset()
        this.form = row
        this.details = true
        this.detailsTitle = '订单详情'
        this.processParams.orderInfoCode = row.orderInfoCode
        this.getListProcess()
        //this.getOrderInfoDetailsList()
        this.getListDetails(row.priceTypeId)
        this.$nextTick(() => {
          this.timeList = row.timeList
          this.outVList = row.outVList
          this.needVList = row.needVList
          this.outIList = row.outIList
          this.needIList = row.needIList
          this.powerList = row.powerList
          this.socList = row.socList
          this.loadEcharts()
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.orderInfoId != null) {
              updateOrderInfo(this.form).then(response => {
                this.getOrderInfoDetailsList()
                this.$modal.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addOrderInfo(this.form).then(response => {
                this.getOrderInfoDetailsList()
                this.$modal.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const orderInfoIds = row.orderInfoId || this.ids
        const orderInfoCodes = row.orderInfoCode || this.codes
        this.$modal
          .confirm('是否确认删除订单号为"' + orderInfoCodes + '"的数据项？')
          .then(function() {
            return delOrderInfo(orderInfoIds)
          })
          .then(() => {
            this.getList()
            this.$modal.msgSuccess('删除成功')
          })
          .catch(() => {
          })
      },
      /** 导出按钮操作 */
      handleExport() {
        var time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
        //time=time.replace(":","%3A") hh:mm:ss
        this.download(
          'custom/orderInfo/export',
          {
            ...this.queryParams
          },
          `用户订单数据_${time}.xlsx`
        )
      }
    }
  }
</script>
<style lang="scss" scoped>
  .topNum {
    margin: 20px 0;

    h4 {
      font-size: 14px;
      color: #8D8D8D;
      margin: 0 !important;
    }

    p {
      font-size: 23px;
      margin: 10px 0 0 !important;
    }

    .topText {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .topBorder {
      border-right: 1px solid #F1F1F1;
    }
  }
</style>
